<template>
  <div class="left-module">
    <DeviceStatusChart
      :device-status="deviceStatus"
      :total-devices="totalDevices"
      @update-circle-progress="updateCircleProgress"
    />
    <UsageChart />
    <!-- 可以选择显示原始监测记录或新的检测记录卡片 -->
    <DetectionRecordCard
      v-if="showDetectionCard"
      :unique-lathe-names="uniqueLatheNames"
      :get-lathe-name-status="getLatheNameStatus"
      :lathe-name-summaries="latheNameSummaries"
      :current-device="currentDevice"
      @select-device="selectDevice"
      @inquiry-from-device="inquiryFromDevice"
    />
    <MonitorLog
      v-else
      :monitor-logs="monitorLogs"
      :lathe-names-to-animate="latheNamesToAnimate"
      @inquiry-from-log="inquiryFromLog"
    />
  </div>
</template>

<script>
import DeviceStatusChart from './DeviceStatusChart.vue'
import UsageChart from './UsageChart.vue'
import MonitorLog from './MonitorLog.vue'
import DetectionRecordCard from './DetectionRecordCard.vue'

export default {
  name: 'LeftModule',
  components: {
    DeviceStatusChart,
    UsageChart,
    MonitorLog,
    DetectionRecordCard
  },
  props: {
    deviceStatus: {
      type: Object,
      required: true
    },
    totalDevices: {
      type: Number,
      default: 35
    },
    monitorLogs: {
      type: Array,
      default: () => []
    },
    latheNamesToAnimate: {
      type: Set,
      default: () => new Set()
    },
    // 新增props用于检测记录卡片
    uniqueLatheNames: {
      type: Array,
      default: () => []
    },
    getLatheNameStatus: {
      type: Function,
      default: () => '离线'
    },
    latheNameSummaries: {
      type: Object,
      default: () => ({})
    },
    currentDevice: {
      type: Object,
      default: () => ({})
    },
    showDetectionCard: {
      type: Boolean,
      default: true // 默认显示新的检测记录卡片
    }
  },
  data() {
    return {
      // 可以在这里添加组件内部状态
    };
  },
  methods: {
    updateCircleProgress() {
      this.$emit('update-circle-progress');
    },

    inquiryFromLog(log) {
      this.$emit('inquiry-from-log', log);
    },

    // 新增方法用于处理检测记录卡片的事件
    selectDevice(latheName) {
      this.$emit('select-device', latheName);
    },

    inquiryFromDevice(deviceInfo) {
      this.$emit('inquiry-from-device', deviceInfo);
    }
  }
}
</script>

<style lang="scss" scoped>
.left-module {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 10px;
}
</style>

<style lang="scss" scoped>
.left-module {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 300px;
  min-width: 300px;
}
</style>
